<script setup lang="ts">
import SignaturePad from 'signature_pad'
const canvasRef = ref<HTMLCanvasElement>(null)
let signaturePad: SignaturePad
onMounted(() => {
  signaturePad = new SignaturePad(canvasRef.value)
})
// const appConfigStore = useAppConfigStore()
const base64 = ref('')
const showCanvas = ref(true)
function saveCanvas() {
  base64.value = signaturePad!.toDataURL()
  showCanvas.value = false
}
</script>

<template>
  <div id="form">
    <h3>申请</h3>
    <el-descriptions title="基本信息" direction="vertical" :column="4" border>
      <el-descriptions-item label="姓名">victor</el-descriptions-item>
      <el-descriptions-item label="联系方式">100086</el-descriptions-item>
      <el-descriptions-item label="Place" :span="2"
        >Suzhou</el-descriptions-item
      >
      <el-descriptions-item label="Remarks">
        <el-tag size="small">School</el-tag>
      </el-descriptions-item>
      <el-descriptions-item label="原因">no why </el-descriptions-item>
    </el-descriptions>

    <el-descriptions
      title="Vertical list without border"
      :column="4"
      direction="vertical"
    >
      <el-descriptions-item label="Username">kooriookami</el-descriptions-item>
      <el-descriptions-item label="Telephone">18100000000</el-descriptions-item>
      <el-descriptions-item label="Place" :span="2"
        >Suzhou</el-descriptions-item
      >
      <el-descriptions-item label="Remarks">
        <el-tag size="small">School</el-tag>
      </el-descriptions-item>
      <el-descriptions-item label="Address"
        >No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu Province
      </el-descriptions-item>
    </el-descriptions>

    <div v-if="showCanvas">
      <canvas ref="canvasRef" width="290" height="150" class="canvas"></canvas>
      <el-button @click="saveCanvas">save</el-button>
    </div>
    <div v-else>
      <img :src="base64" alt="canvas" />
    </div>
  </div>
  <div>
    <el-button v-print="'#form'"> print </el-button>
  </div>
</template>

<style lang="scss" scoped>
#form {
  border: 1px solid black;
  padding: 20px;

  .canvas {
    border: 1px solid black;
  }
}
</style>
